<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>a 链接</title>
</head>
<body>

    <h1>href属性值 - 种类1：是一个绝对路径</h1>
    <h2>文字链接:</h2>
    <p>
        <a href="https://www.baidu.com/">百度</a>
    </p>
    <br>

    <h2>图片链接:</h2>
    <p>
        <a href="https://www.baidu.com/">
            <img src="../../img/2x/google.png" style="height: 5%; width: 5%" alt="Open baidu">
        </a>
    </p>
    <br>
    <hr>

    <h1>href属性值 - 种类2：是一个相对路径</h1>
    <h2>href属性值 - 种类2_1：相对路径在当前网页的同级目录</h2>
    <p>
        <a href="code.html">Open code.html</a>
    </p>

    <h2>href属性值 - 种类2_2：相对路径在当前网页上一级/下一次目录</h2>
    <p>
        <a href="../a/sup.html"> Open 前网页上一级目录 中的 sup.html</a>
    </p>

    <h2>href属性值 - 种类2_3：相对路径在当前网页下一次目录</h2>
    <p>
        <a href="a/sub.html"> Open 前网页下一级目录 中的 sub.html</a>
    </p>
    <hr>

    <h1>href属性值 - 种类3：链接锚点</h1>
    <h2>访问锚点,即链接到同一个页面的不同位置</h2>
    <p style="background: red;width: 20%">
        <a href="#C4">查看 Chapter 4</a>
    </p>
    <p style="background: red; width: 20%">
        <a href="#C10">查看 Chapter 10</a>
    </p>

    <h2>访问网页的某个锚点:即链接到另外一个页面的一个位置</h2>
    <p style="background: #5bc0de;width: 20%">
        <a href="a/pin_duo_duo.htm#to_read">
            点击，跳转到 拼多多 中的推荐阅读
        </a>
    </p>

    <p style="background: #5bc0de;width: 20%">
        <a href="a/pin_duo_duo.htm#5_4">
            点击，跳转到 拼多多 中的5.4 青年节，说说那些身价百万的 80、90、00 后创业者
        </a>
    </p>
    <hr>

    <h1>链接开启窗口</h1>
    <h2>_blank : 每个新网页都在新的窗口中开启</h2>
    <p>
        <a href="https://www.baidu.com/" target="_blank">百度</a>
    </p>

    <h2>display : 加载响应到当前框架的HTML4父框架或当前的HTML5浏览上下文的父浏览上下文。如果没有parent框架或者浏览上下文，此选项的行为方式相同_self</h2>
    <p>
        <a href="a/page_1.html" target="_blank">Open page 1</a>
    </p>

    <h2> _self: 当前页面加载</h2>
    <p>
        <a href="https://www.baidu.com/" target="_self">百度</a>
    </p>
    <hr>

    <h1>邮件链接</h1>
    <p>
        <a href="mailto:47613354@qq.com"> 联系拉登 </a>
    </p>

    <br>

    <h2>Chapter 1</h2>
    <p>This chapter explains ba bla bla</p>

    <h2>Chapter 2</h2>
    <p>This chapter explains ba bla bla</p>

    <h2>Chapter 3</h2>
    <p>This chapter explains ba bla bla</p>

    <h2><a name="C4">Chapter 4</a></h2>
    <p>This chapter explains ba bla bla</p>

    <h2>Chapter 5</h2>
    <p>This chapter explains ba bla bla</p>

    <h2>Chapter 6</h2>
    <p>This chapter explains ba bla bla</p>

    <h2>Chapter 7</h2>
    <p>This chapter explains ba bla bla</p>

    <h2>Chapter 8</h2>
    <p>This chapter explains ba bla bla</p>

    <h2>Chapter 9</h2>
    <p>This chapter explains ba bla bla</p>

    <h2><a name="C10">Chapter 10</a></h2>
    <p>This chapter explains ba bla bla</p>

    <h2>Chapter 11</h2>
    <p>This chapter explains ba bla bla</p>

    <h2>Chapter 12</h2>
    <p>This chapter explains ba bla bla</p>

    <h2>Chapter 13</h2>
    <p>This chapter explains ba bla bla</p>

    <h2>Chapter 14</h2>
    <p>This chapter explains ba bla bla</p>

    <h2>Chapter 15</h2>
    <p>This chapter explains ba bla bla</p>

    <h2>Chapter 16</h2>
    <p>This chapter explains ba bla bla</p>

    <h2>Chapter 17</h2>
    <p>This chapter explains ba bla bla</p>

</body>
</html>